<template>
  <div style="width: 100%">
    <template>
      <el-steps :active="steps" style="width: 60%;margin-left: 10%">
        <el-step title="步骤1" description="开始报名"></el-step>
        <el-step title="步骤2" description="等待审核"></el-step>
        <el-step title="步骤3" description="报名结果"></el-step>
      </el-steps>
      <div v-show="steps==1" style="margin-left: 30%;margin-top: 100px">

        <el-card style="width: 300px;">
          <h1 style="text-align: center">您当前尚未开始报名</h1>
          &nbsp;进入报名页面
         <el-button type="danger" @click='goSignUp'>我要报名</el-button>
        </el-card>
      </div>
      <div v-show="steps==2" style="margin-left: 25%;margin-top: 100px">
        <template>
          <el-card style="width: 420px;">
          <el-descriptions title="报名信息" style="width: 380px;"
                           width="3px"
                           :column="1"
                           size="large"
                           label-align="center"
                           align="center"
                           border>
            <el-descriptions-item label="姓名">{{infoData.name}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{infoData.sex}}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{infoData.sfzh}}</el-descriptions-item>
            <el-descriptions-item label="准考证号">{{infoData.ticket}}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{infoData.tele}}</el-descriptions-item>
            <el-descriptions-item label="专业层次">{{infoData.zycc}}</el-descriptions-item>
            <el-descriptions-item label="专业名称">{{infoData.zymc}}</el-descriptions-item>
            <el-descriptions-item label="课程代码">{{infoData.kcdm}}</el-descriptions-item>
            <el-descriptions-item label="提交文件">
              <el-link v-for="(f,key) in segmenteFile(infoData.file)" :key="key" target="_blank" :href="f.fsrc">{{f.fname}}</el-link>
            </el-descriptions-item>
          </el-descriptions>
          <el-button type="danger" style="margin-left: 30%;margin-top: 20px" @click="goSignUp">我要修改</el-button>
          </el-card>
        </template>
      </div>

      <el-dialog :visible="dialogFormVisible" title="修改报名信息" :close-on-click-modal="false" :append-to-body="true">
        <el-form :model="form" :rules="rules" ref="login" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input type="text" placeholder="请填写考生本人真实姓名，非常重要" size="small"
                      prefix-icon="el-icon-postcard"
                      v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <div>
              <el-radio v-model="form.sex" label="1" size="large">男</el-radio>
              <el-radio v-model="form.sex" label="2" size="large">女</el-radio>
            </div>
          </el-form-item>
          <el-form-item label="身份证号" prop="sfzh">
            <el-input type="password" placeholder=">请填写考生本人身份证号，非常重要，末位为X的请大写" size="small" show-password prefix-icon="el-icon-lock"
                      v-model="form.sfzh"></el-input>
          </el-form-item>

          <el-form-item label="准考证号" prop="ticket">
            <el-input type="text" placeholder="可作为登录用户名，往届考生请重新注册" size="small"
                      prefix-icon="el-icon-picture"
                      v-model="form.ticket"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="tele">
            <el-input type="text" placeholder="接收申请结果等相关信息，" size="small"
                      prefix-icon="el-icon-picture"
                      v-model="form.tele"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input type="text" placeholder="密码找回和接收公告等，非常重要" size="small"
                      prefix-icon="el-icon-picture"
                      v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="专业层次" prop="zycc">
            <el-select v-model="form.zycc" placeholder="Select" size="small" @change="Change">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="专业名称" prop="zymc">
            <el-select v-model="form.zymc" placeholder="Select" size="small">
              <el-option
                  v-for="item in options_zymc"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="课程代码" prop="kcdm">
            <el-checkbox-group v-model="form.kcdm">
              <el-checkbox  v-for="item in kcdm"
                            :label="item.name+'('+item.code+')'"
                            :key="item.code"
              >
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-tag style="color:red">注意：如果需要修改，所有提交过的文件需要重新提交</el-tag>
          <el-form-item label="文件上传">

            <el-upload
                ref="upload"
                list-type="text"
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :auto-upload="false"
                :multiple="true"
                :limit="3"
                show-file-list="true"
                :on-exceed="handleExceed"

            >
              <el-button type="primary">点击上传</el-button>
              <!--<el-button type="primary">上传个人照片</el-button>-->
              <template #tip>
                <div class="el-upload__tip">
                  JPG/PNG/PDF文件大小不得超过500KB。
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="modifySign">确认修改</el-button>
      </span>
        </template>
      </el-dialog>



      <div v-show="steps==3" style="margin-left: 30%;margin-top: 100px">
        <el-card style="width: 300px;">
          <h1 style="text-align: center">审核结果</h1>
          &nbsp;
          <span v-show="result==1">
            您的报名已审核通过，请注意留意后续公告！
          </span>
          <span v-show="result==-1">
            您的报名审核不通过，请重新检查报名信息！
          </span>
        </el-card>

      </div>

    </template>

  </div>
</template>

<script>
export default {
  //报名情况
  name: "RegisterStatus",
  data(){
    return {
      options_zymc: [],
      //课程代码
      kcdm:[],
      //步骤页对应的步骤
      steps:"3",
      //审核结果：1为审核通过，-1为审核不通过
      result:"1",
      //点击修改后的表单
      form:{},
      //步骤二中显示的报名情况
      infoData:{
          name: "",
          sex: "",
          sfzh: "",
          ticket: "",
          tele: "",
          email: "",
          zycc: "",
          zymc: "",
          kcdm: "",
          file: ""
      },
    }
  },
  mounted:function(){
    //判断当前审核结果
    this.JudgeRes();//需要触发的函数
  },
  methods:{
    //分割文件  file是所有的字符串地址
    segmenteFile(file){
      let array = file.split('|');
      //console.log(array)
      //console.log(array.length)
      let list = [];
      for(let i = 0 ; i < array.length ; i++ ){
        let names = array[i].split('_');
        list.push({'fname':names[1],'fsrc': this.$store.state.baseurl +array[i]})
      }
      //console.log(list)
      return list;
    },
    //判断审核结果
    JudgeRes(){
      let param = new URLSearchParams();
      param.append("username",this.$store.state.user.username )
      this.axios.post("signupres",
          param
      ).then((response) => {
        console.log(response.data)
        console.log(response.data['msg'])
        this.$forceUpdate()         //解决数据渲染延迟
        if( response.data['msg'] == "ok"){
          //  res表示审核的结果（0表示未审核，1表示审核通过，-1表示审核不通过，2表示没开始报名）
          if( response.data['res'] == "2" ){      //未报名
            this.steps = "1";
          }else if( response.data['res'] == "0"  ){     //未审核
            this.steps = "2";
            let param = new URLSearchParams();
            param.append("username",this.$store.state.user.username)
            this.axios.post("signupinfo",
                param
            ).then((response) => {
              this.infoData.name = response.data['name']
              this.infoData.sex = response.data['sex']
              this.infoData.ticket = response.data['ticket']
              this.infoData.tele = response.data['tele']
              this.infoData.email = response.data['email']
              this.infoData.zycc = response.data['zycc']
              this.infoData.zymc = response.data['zymc']
              this.infoData.kcdm = response.data['kcdm']
              this.infoData.file = response.data['file']
            })
          }else if( response.data['res'] == "1" || response.data['res'] == "-1"  ){     //审核结果
            this.steps = "3";
            this.result = response.data['res'];
          }

        }
      })
    },
    //进入修改报名的对话框
    goSignUp(){
      //this.$router.push("/success/signupinfo");
      this.$forceUpdate()         //解决数据渲染延迟
      this.getCode();             //获取课程代码
      this.dialogFormVisible = true;
      this.form  = this.infoData
      //修改一些对应的东西
      //1.性别对应表单的
      if( this.infoData.sex == "男" ){
        this.form.sex = "1"
      }else{
        this.form.sex = "2"
      }
      //2.课程对应表单的
      this.form.kcdm = []
      //是这个逗号吗？？ 现在还不太确定
      let array = this.infoData.kcdm.split(",")
      for(let i = 0 ; i < array.length ; i++ ){
        this.form.kcdm.push(array[i])
      }

    },
    Change(){
      this.GetCode();
      this.form.zymc = ""
      if( this.form.zycc == "本科" ){
        this.options_zymc = [
          {
            value: '计算机科学技术',
            label: '计算机科学技术',
          },
          {
            value: '网路工程',
            label: '网路工程',
          },
        ]
      }else if( this.form.zycc == "专科" ) {
        this.options_zymc = [
          {
            value: '计算机信息管理',
            label: '计算机信息管理',
          },
          { value: '计算机应用技术',
            label: '计算机应用技术',
          },
        ]
      }
    },
    //点击修改报名信息
    modifySign(){

    },
    //获取课程代码
    getCode(){
      console.log("正在获取课程代码" )
      this.axios.post("showcode"
      ).then((response) => {
        console.log(response.data)
        if (response.data['msg'] == "ok") {
          this.kcdm = response.data["course"]
        }
      })
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUpload(file) {
      this.param = new FormData();
      this.fileList.push(file);
      let images = [...this.fileList];
      console.log("images", images);

      //this.param.append("file1", images);

      images.forEach((img) => {
        this.param.append("file", img); // 把单个图片重命名，存储起来（给后台）
      });
      return false;
    },


  }
}
</script>

<style scoped>

</style>